import React, {Fragment} from 'react'
import PropTypes from 'prop-types'
import {Button, Modal, Table} from 'antd'
import classnames from 'classnames'
import {DropOption} from 'components'
import AnimTableBody from 'components/DataTable/AnimTableBody'
import styles from './List.less'

const {confirm} = Modal

const List = ({
                onDeleteItem, onEditItem, showWxChatModal, isMotion, location, ...tableProps
              }) => {

  const handleMenuClick = (record, e) => {
    if (e.key === 'edit') {
      onEditItem(record)
    } else if (e.key === 'delete') {

    }
  }

  const columns = [
    {
      title: '描述',
      dataIndex: 'description',
      key: 'description',
      width: 160,
    }, {
      title: '查看聊天记录',
      dataIndex: 'detail',
      key: 'detail',
      width: 100,
      render: (v, r) => <a href="javascript:;" onClick={() => showWxChatModal(r)} >详情</a>,
    }, {
      title: '归属员工',
      dataIndex: 'personalChatRecords',
      key: 'belongEmpName',
      width: 100,
      render: c => {
        if (c) {
          return c.operator ? c.operator.belongEmpName : '-'
        }
      },
    }, {
      title: '推荐时间',
      dataIndex: 'recommandTime',
      key: 'recommandTime',
      width: 120,
    }, {
      title: '推荐人',
      dataIndex: 'recommandEmp',
      key: 'recommandEmp',
      width: 100,
      render: emp => emp ? emp.realname + '(' + emp.username + ')' : '-',
    }, {
      title: '操作',
      key: 'operation',
      width: 100,
      render: (text, record) => {
        // return <DropOption onMenuClick={e => handleMenuClick(record, e)}
        //                    menuOptions={[{key: 'edit', name: '查看编辑'}, {key: 'delete', name: '删除'}]}/>
        return <Fragment>
          <Button size={'small'} type={'primary'} className={'margin-right'} onClick={() => onEditItem(record)}>查看编辑</Button>
          <Button size={'small'} type={'danger'} ghost onClick={() => {
            confirm({
              title: '您确定要删除这条数据吗?',
              okText: '确定',
              cancelText: '取消',
              onOk () {
                onDeleteItem(record.id)
              },
            })
          }}>删除</Button>
        </Fragment>
      },
    },
  ]

  const AnimateBody = (props) => {
    return <AnimTableBody {...props} />
  }

  const CommonBody = (props) => {
    return <tbody {...props} />
  }

  return (
    <Table
      {...tableProps}
      className={classnames(styles.table, {[styles.motion]: isMotion})}
      scroll={{x: 800}}
      columns={columns}
      simple
      rowKey={record => record.id}
      components={{
        body: {wrapper: isMotion ? AnimateBody : CommonBody},
      }}
    />
  )
}

List.propTypes = {
  onDeleteItem: PropTypes.func,
  onEditItem: PropTypes.func,
  location: PropTypes.object,
}

export default List
